<template>

  <!-- 基本框架（侧边栏、标头等） -->

  <div>

    <el-container>
      <el-header>
        <span>
          <b>后端管理系统</b>
        </span>
        <span>
        </span>
      </el-header>

      <el-container class="container">
        <el-aside width="200px">
          <ul>
            <li><router-link to="/">学生管理</router-link></li>
           
          </ul>
        </el-aside>
        <!-- 内容 -->
        <el-main>
          <slot>
			  <router-view></router-view>
		  </slot>
        </el-main>
      </el-container>
    </el-container>


  </div>
</template>

<script>
export default {
  data() {
    return {


    };
  },
  created() {

  },
  methods: {

  }
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

.actiiveTest {
  color: rgb(222, 250, 132);
}

.el-header {
  background-color: #7d8692;
  color: #333;
  display: flex;
  justify-content: space-between;
}

.el-header span {
  /* margin: 0 10px; */
  display: flex;
  align-items: center;
}

.el-aside {
  background-color: #474d54;
  text-align: center;
  line-height: 200px;
}

.el-aside ul {
  list-style: none;
}

.el-aside ul li {
  height: 50px;
  line-height: 50px;
}

/* 侧边栏字体颜色 */
.el-aside ul li a {
  /* 下划线 */
  text-decoration: none;
  color: #999999;
}

/* .el-aside ul li a.router-link-exact-active {
  color: bisque;
  font-weight: bold;
} */

.el-aside ul li a.green {
  color: bisque;
  font-weight: bold;
}

.el-main {
  /* background-color: #E9EEF3; */
  color: #333;
  /* text-align: center; */
  /* line-height: 160px; */
}

.container {
  height: calc(100vh - 60px);
}
</style>